import QtQuick

Rectangle {
    id: root

    //component size
    property int lineWidth: 5
    //text
    property real slide_var: 0.5

    //frontline color
    property color frontColor: "#325B9A"

    property int animationDuration: 1000

    anchors.centerIn: parent

    color: "#00000000"

    // 双内阴影不会画，直接使用切图
    Image{
        id: back_image
        width: 48
        height: 48
        source: "qrc:/usv_bridge/UI/compass/main-engine-component.png"
    }

    Canvas{
        id: front_canvas
        antialiasing: true
        // no anchors, canvas must be lefttop is (0,0)

        width: back_image.width
        height: back_image.height

        function get_adaptive_value(){
            var max_temp = back_image.height/2.0;
            return max_temp * root.slide_var;
        }

        onPaint: {
            var ctx=getContext("2d");
            // front path color
            ctx.beginPath();
            ctx.strokeStyle = frontColor;
            ctx.moveTo(width/2.0, height/2.0);
            ctx.lineCap = "butt";
            ctx.lineWidth = root.lineWidth;
            ctx.lineTo(width/2.0, height/2.0 - get_adaptive_value());
            ctx.stroke();
        }
    }

}
